import _mergeJSXProps from '@vue/babel-helper-vue-jsx-merge-props'
// Utils
import { createNamespace } from '../utils'
import { inherit, emit } from '../utils/functional' // Components

import Icon from '../icon' // Types
import './style'
var _createNamespace = createNamespace('alert')
var createComponent = _createNamespace[0]
var bem = _createNamespace[1]

const TYPE_ICONS_MAP = {
  success: 'el-icon-success',
  warning: 'el-icon-warning',
  error: 'el-icon-error'
}

function Alert(h, props, slots, ctx) {
  var _style

  var type = props.type
  var mark = props.mark
  var plain = props.plain
  var color = props.color
  var round = props.round
  var effect = props.effect
  var size = props.size
  var key = plain ? 'color' : 'backgroundColor'
  var style = ((_style = {}), (_style[key] = color), _style)
  var typeIcon = props.icon || TYPE_ICONS_MAP[props.type] || 'el-icon-info'
  var themeClass = (effect && effect + '-') + type
  if (props.textColor) {
    style.color = props.textColor
  }

  var classes = {
    mark: mark,
    plain: plain,
    round: round
  }

  if (size) {
    classes[size] = size
  }

  var AlertIcon =
    props.showIcon &&
    h(
      'div',
      {
        class: bem('icon')
      },
      h(Icon, {
        attrs: {
          name: typeIcon
        }
      })
    )

  function Title() {
    if (slots.title) {
      return slots.title()
    }
    if (props.title) {
      return h(
        'div',
        {
          class: bem('title')
        },
        props.title
      )
    }
  }

  function Description() {
    if (slots.desc) {
      return slots.desc()
    }
    if (props.description) {
      return h(
        'div',
        {
          class: bem('text')
        },
        props.description
      )
    }
  }

  var CloseIcon =
    props.closable &&
    h(Icon, {
      attrs: {
        name: 'close-bold'
      },
      class: bem('close'),
      on: {
        click: function click(event) {
          event.stopPropagation()
          ctx.visible = false
          emit(ctx, 'close')
        }
      }
    })

  return h(
    'transition',
    {
      attrs: {
        name: props.closable ? 'em-fade' : null
      }
    },
    [
      h(
        'div',
        _mergeJSXProps([
          {
            key: 'content',
            style: style,
            class: bem([classes, themeClass])
          },
          inherit(ctx, true)
        ]),
        [
          AlertIcon,
          Title(),
          Description(),
          slots.default == null ? void 0 : slots.default(),
          CloseIcon
        ]
      )
    ]
  )
}

Alert.props = {
  title: String,
  description: String,
  type: {
    type: String,
    default: 'info'
  },
  closable: {
    type: Boolean,
    default: true
  },
  closeText: String,
  showIcon: Boolean,
  icon: String,
  center: Boolean,
  effect: {
    type: String,
    default: 'light',
    validator: function(value) {
      return ['light', 'outline'].indexOf(value) !== -1
    }
  }
}
Alert.data = function data() {
  return {
    visible: true
  }
}

// export  createComponent(Alert)

export default createComponent({
  props: {
    title: String,
    description: String,
    type: {
      type: String,
      default: 'info'
    },
    closable: {
      type: Boolean,
      default: true
    },
    closeText: String,
    showIcon: Boolean,
    icon: String,
    center: Boolean,
    effect: {
      type: String,
      default: 'light',
      validator: function(value) {
        return ['light', 'outline'].indexOf(value) !== -1
      }
    }
  },
  data: function data() {
    return {
      visible: true
    }
  },
  methods: {
    onClickIcon: function onClickIcon(event) {
      if (this.mode === 'closeable') {
        this.show = false
        this.$emit('close', event)
      }
    }
  },
  render: function render() {
    var _this4 = this

    var h = arguments[0]
    var slots = this.slots

    var _style

    var type = this.type
    var mark = this.mark
    var plain = this.plain
    var color = this.color
    var round = this.round
    var effect = this.effect
    var size = this.size
    var key = plain ? 'color' : 'backgroundColor'
    var style = ((_style = {}), (_style[key] = color), _style)
    var typeIcon = this.icon || TYPE_ICONS_MAP[this.type] || 'el-icon-info'
    var themeClass = (effect && effect + '-') + type
    if (this.textColor) {
      style.color = this.textColor
    }

    var classes = {
      mark: mark,
      plain: plain,
      round: round
    }

    if (size) {
      classes[size] = size
    }

    var AlertIcon =
      this.showIcon &&
      h(
        'div',
        {
          class: bem('icon')
        },
        h(Icon, {
          attrs: {
            name: typeIcon
          }
        })
      )

    function Title() {
      if (slots.title) {
        return slots.title()
      }
      if (this.title) {
        return h(
          'div',
          {
            class: bem('title')
          },
          this.title
        )
      }
    }

    function Description() {
      if (slots.desc) {
        return slots.desc()
      }
      if (this.description) {
        return h(
          'div',
          {
            class: bem('text')
          },
          this.description
        )
      }
    }

    var CloseIcon =
      this.closable &&
      h(Icon, {
        attrs: {
          name: 'close-bold'
        },
        class: bem('close'),
        on: {
          click: function click(event) {
            event.stopPropagation()
            _this4.visible = false
            _this4.$emit('close', event)
          }
        }
      })

    return h(
      'transition',
      {
        attrs: {
          name: this.closable ? 'em-fade' : null
        },
        directives: [
          {
            name: 'show',
            value: this.show
          }
        ]
      },
      [
        h(
          'div',
          _mergeJSXProps([
            {
              key: 'content',
              style: style,
              class: bem([classes, themeClass])
            },
            inherit(this, true)
          ]),
          [
            AlertIcon,
            Title(),
            Description(),
            slots.default == null ? void 0 : slots.default(),
            CloseIcon
          ]
        )
      ]
    )
  }
})
